/**
* 功能描述：功能日历样式表
* @author jin xiaohang
* @date 2022/9/27 15:44
* @version 1.0
*/
@import "src/style/mixins/index";

//定义布局相关
@mixin calendar-layout{
  width: 100%;
  height: 100%;

  //功能日历头部布局
  .#{$namespace}-calendar-header{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    >div{
      margin-left: 5px;
      margin-bottom: 5px;
    }
  }

  //日历主体布局
  .#{$namespace}-calendar-main{
    width: 100%;
    height: 90%;

    //列布局
    td{
      position: relative;
    }

    //日历表格主体
    .#{$namespace}-calendar-main-body{
      padding: 8px 12px;

      //日历表格布局
      .#{$namespace}-calendar-main-table{
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
        height: 256px;

        //日历列头布局
        .#{$namespace}-calendar-main-table-column-header{
          padding-right: 12px;
          padding-bottom: 5px;
          text-align: right;
          width: 33px;
          line-height: 18px;
        }

        //日历表格（不含列头）布局
        .#{$namespace}-calendar-main-table-body{
          display: table-row-group;
          vertical-align: middle;

          //每行单元格布局
          .#{$namespace}-calendar-main-table-cell{

            //日期布局
            .#{$namespace}-calendar-main-table-date{
              display: block;
              height: 116px;
              margin: 0 4px;
              padding: 4px 8px;
              text-align: left;

              //日期值布局
              .#{$namespace}-calendar-main-table-value{
                width: auto;
                text-align: right;
              }

              //日期备注布局
              .#{$namespace}-calendar-main-table-content{
                position: static;
                width: auto;
                height: 88px;
                left: 0;

                //日期备注标签布局
                .#{$namespace}-calendar-main-table-cell-dot{
                  position: relative;
                  top: -1px;
                  display: inline-block;
                  width: 6px;
                  height: 6px;
                  vertical-align: middle;
                }

                //日期备注文本布局
                .#{$namespace}-calendar-main-table-cell-text{
                  margin-left: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}

//单元格激活样式
@mixin calendar-cell-active{

  //激活单元格
  .#{$namespace}-calendar-main-table-selected-cell{
    background-color: #E6F7FF;

    //单元格的日期值
    .#{$namespace}-calendar-main-table-value{
      color: #40a9ff;
    }
  }
}

//下个月单元格样式
@mixin calendar-cell-next-month{

  //下个月单元格
  .#{$namespace}-calendar-main-table-next-month-cell{

    //单元格的日期值
    .#{$namespace}-calendar-main-table-value{
      color:#BFBFBF;
    }
  }
}



//功能日历布局样式表
@include b(calendar){

  //日历主体样式
  .#{$namespace}-calendar-main{

    //列
    td{
      border:0;
    }

    //日历表格主体样式
    .#{$namespace}-calendar-main-body{

      //日历表格样式
      .#{$namespace}-calendar-main-table{
        background-color: transparent;
        border-collapse: collapse;

        //日历表格（不含列头）样式
        .#{$namespace}-calendar-main-table-body{
          border-color: inherit;

          //每行单元格样式
          .#{$namespace}-calendar-main-table-cell{

            //鼠标悬停样式
            &:hover{
              cursor: pointer;
              background-color: #e4e4e4;
            }

            //日期样式
            .#{$namespace}-calendar-main-table-date{
              color: #000000d9;
              border-top: 2px solid #f0f0f0;
              transition: background .3s;

              //日期值样式
              .#{$namespace}-calendar-main-table-value{
                background: transparent;
              }

              //日期备注样式
              .#{$namespace}-calendar-main-table-content{
                overflow-y: auto;
                bottom: -9px;

                  //日期备注标签样式（警告类型）
                  .#{$namespace}-calendar-main-table-cell-dot-warning{
                    border-radius: 50%;
                    background-color: #faad14;
                  }

                  //日期备注标签样式（成功类型）
                  .#{$namespace}-calendar-main-table-cell-dot-success{
                    border-radius: 50%;
                    background-color: #52c41a;
                  }

                  //日期备注标签样式（危险类型）
                  .#{$namespace}-calendar-main-table-cell-dot-danger{
                    border-radius: 50%;
                    background-color: #ff4d4f;
                  }

                //日期备注文本样式
                .#{$namespace}-calendar-main-table-cell-text{
                  color: #000000d9;
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }

  //引用布局
  @include calendar-layout;

  //引用激活单元格样式
  @include calendar-cell-active;

  //引用下个月日期样式
  @include calendar-cell-next-month;

}